<template>
  <vxe-modal
    title="办理任务"
    v-model="dialogVisible"
    v-if="dialogVisible"
    :loading="loading"
    width="70%" height="95vh" showFooter esc-closable show-zoom resize>

    <div style="height: 60vh; overflow-y: auto;">
      <el-card class="box-card" shadow="never" :body-style="{ padding: '10px',backgroundColor: '#bfcdda' }">
        <!-- 变更信息 -->
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span style="font-size: 16px; color: #1890ff;">变更信息</span>
          </div>
          <el-descriptions class="margin-top" :column="2" size="medium" border
                           :contentStyle="content_style" :labelStyle="label_style">
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  合同名称：
                </div>
              </template>
              {{ htBgData.htName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  合同编号：
                </div>
              </template>
              {{ htBgData.htBh }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  申请日期：
                </div>
              </template>
              {{ htBgData.sqTime }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  申请单位/项目部：
                </div>
              </template>
              {{ htBgData.sqDw }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  联系电话：
                </div>
              </template>
              {{ htBgData.lxPhone }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  申请变更事项：
                </div>
              </template>
              {{ htBgData.sqBgSx}}
            </el-descriptions-item>
          </el-descriptions>

          <el-descriptions class="margin-top" :column="1" size="medium" border  direction="vertical">
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  变更原因：
                </div>
              </template>
              {{ htBgData.bgYy }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  变更内容：
                </div>
              </template>
              {{ htBgData.bgNr }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  执行事项时间说明:
                </div>
              </template>
              {{ htBgData.zxSm }}
            </el-descriptions-item>
          </el-descriptions>

        </el-card>
        <br>
        <!-- 项目名称变更 -->
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span style="font-size: 16px; color: #1890ff;">项目名称变更</span>
          </div>
          <el-descriptions class="margin-top" :column="2" size="medium" border
                           :contentStyle="content_style" :labelStyle="label_style">
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  原项目名称：
                </div>
              </template>
              {{ htBgData.yXmName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  变更项目名称：
                </div>
              </template>
              {{ htBgData.bgXmName }}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
        <br>
        <!-- 合同延期 -->
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span style="font-size: 16px; color: #1890ff;">合同延期</span>
          </div>
          <el-descriptions class="margin-top" :column="2" size="medium" border
                           :contentStyle="content_style" :labelStyle="label_style">
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  原起止年月:
                </div>
              </template>
              {{ htBgData.yQTime + ' 至 ' + htBgData.yZTime }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  变更起止年月：
                </div>
              </template>
              {{ htBgData.bgQTime ? htBgData.bgQTime : '' }}
              {{ htBgData.bgQTime && htBgData.bgZNy ? '至' : '' }}
              {{ htBgData.bgZNy ? htBgData.bgZNy : '' }}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
        <br>
        <!-- 原负责人情况 -->
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span style="font-size: 16px; color: #1890ff;">原负责人情况</span>
          </div>
          <el-descriptions class="margin-top" :column="3" size="medium" border
                           :contentStyle="content_style" :labelStyle="label_style">
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  姓名:
                </div>
              </template>
              {{ htBgData.yFzName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  地址：
                </div>
              </template>
              {{ htBgData.yFzDz }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  邮编：
                </div>
              </template>
              {{ htBgData.yFzYb }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  邮箱：
                </div>
              </template>
              {{ htBgData.yFzYx }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  电话：
                </div>
              </template>
              {{ htBgData.yFzPhone }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  传真：
                </div>
              </template>
              {{ htBgData.yFzrCz }}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
        <br>
        <!-- 变更负责人情况 -->
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span style="font-size: 16px; color: #1890ff;">变更负责人情况</span>
          </div>
          <el-descriptions class="margin-top" :column="3" size="medium" border
                           :contentStyle="content_style" :labelStyle="label_style">
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  姓名:
                </div>
              </template>
              {{ htBgData.bgFzName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  地址：
                </div>
              </template>
              {{ htBgData.bgFzDz }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  邮编：
                </div>
              </template>
              {{ htBgData.bgFzYb }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  邮箱：
                </div>
              </template>
              {{ htBgData.bgFzYx }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  电话：
                </div>
              </template>
              {{ htBgData.bgFzPhone }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  传真：
                </div>
              </template>
              {{ htBgData.bgFzCz }}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
        <br>
        <!-- 原项目预算经费 -->
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span style="font-size: 16px; color: #1890ff;">原项目预算经费</span>
          </div>
          <el-descriptions class="margin-top" :column="3" size="medium" border
                           :contentStyle="content_style" :labelStyle="label_style">
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  项目总经费(万元):
                </div>
              </template>
              {{ htBgData.yXmZjf }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  甲方支付(万元)：
                </div>
              </template>
              {{ htBgData.yJfZf }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  乙方自筹(万元)：
                </div>
              </template>
              {{ htBgData.yYfZc }}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
        <br>
        <!-- 变更项目预算经费 -->
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span style="font-size: 16px; color: #1890ff;">变更项目预算经费</span>
          </div>
          <el-descriptions class="margin-top" :column="3" size="medium" border
                           :contentStyle="content_style" :labelStyle="label_style">
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  项目总经费(万元):
                </div>
              </template>
              {{ htBgData.bgXmZjf }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  甲方支付(万元)：
                </div>
              </template>
              {{ htBgData.bgJfZf }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  乙方自筹(万元)：
                </div>
              </template>
              {{ htBgData.bgYfZc }}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
        <br>
        <!-- 原项目经费支付计划 -->
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span style="font-size: 16px; color: #1890ff;">原项目经费支付计划</span>
          </div>
          <el-descriptions class="margin-top" :column="2" size="medium" border
                           :contentStyle="content_style" :labelStyle="label_style">
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  合同总额(万元):
                </div>
              </template>
              {{ htBgData.yHtZe }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  甲方向乙方提供经费(万元)：
                </div>
              </template>
              {{ htBgData.yJfToYf }}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
        <br>
        <!-- 变更项目经费支付计划 -->
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span style="font-size: 16px; color: #1890ff;">变更项目经费支付计划</span>
          </div>
          <el-descriptions class="margin-top" :column="2" size="medium" border
                           :contentStyle="content_style" :labelStyle="label_style">
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  合同总额(万元):
                </div>
              </template>
              {{ htBgData.bgHtZe }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  甲方向乙方提供经费(万元)：
                </div>
              </template>
              {{ htBgData.bgJfToYf }}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
        <br>
        <!-- 变更课题组成人员情况 -->
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span style="font-size: 16px; color: #1890ff;">变更课题组成人员情况</span>
          </div>
          <el-table :header-cell-style="{background:'#d0cece',color:'#000000',fontWeight:'bold'}"
                    :data="htglHtbgZcryList" ref="htglHtbgZcry">
            <el-table-column label="序号" align="center" type="index" width="50"/>
            <el-table-column align="center" label="姓名" prop="name" width="100"/>
            <el-table-column align="center" label="年龄" prop="age" width="70"/>
            <el-table-column align="center" label="职务" prop="zhiWu" width="150"/>
            <el-table-column align="center" label="职称" prop="zhiChen" width="150"/>
            <el-table-column align="center" show-overflow-tooltip label="专业" prop="zy" width="150"/>
            <el-table-column align="center" show-overflow-tooltip label="本课题中分工" prop="bKtFg"/>
            <el-table-column align="center" label="投入课题工作总月数" prop="trZys" width="150"/>
            <el-table-column align="center" show-overflow-tooltip label="工作单位" prop="gzDw"/>
          </el-table>
        </el-card>
        <br>
        <!-- 附件资料 -->
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span style="font-size: 16px; color: #1890ff;">附件资料</span>
          </div>
          <el-table :header-cell-style="{background:'#d0cece',color:'#000000',fontWeight:'bold'}"
                    :data="htglHtbgFjList" ref="htglHtbgFj">
            <el-table-column label="序号" align="center" type="index" width="50"/>
            <el-table-column label="文件名称" prop="fileName" :formatter="getFileNames"/>
            <el-table-column label="文件大小" prop="fileSize" width="200"/>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="handleDownload(scope.row)"
                >下载
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
        <br>

      </el-card>
    </div>
    <el-divider></el-divider>

    <el-card shadow="never">
      <el-form label-width="100px">
        <el-form-item label="审核状态：">
          <el-radio label="1" v-model="submitType">同意</el-radio>
          <el-radio label="2" v-model="submitType">驳回</el-radio>
          <el-select remote v-if="submitType==='2'" v-model="denyTo" placeholder="驳回到：" @visible-change="selectBefore">
            <el-option
              v-for="item in beforeData"
              :key="item.dkey"
              :label="item.taskName"
              :value="item.dkey">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="审核意见：">
          <el-input type="textarea" v-model="comment"></el-input>
        </el-form-item>
      </el-form>
    </el-card>

    <div slot="footer" class="dialog-footer dialog-footer-center">
      <el-button type="primary" @click="onSubmit()">提交</el-button>
      <el-button @click="dialogVisible=false">关闭</el-button>
    </div>
  </vxe-modal>
</template>
<script>

import { fallBackTaskByTaskDefinitionKey, passTask, selectBefore, selectHistory} from "@/api/activiti/task"
import {getHtbg, selectHtglHtbgZcryByHtbgId} from "@/api/xmgl/htgl/htbg/htbg";

export default {
  name: "HtBgSq", //合同变更审批界面
  dicts: ['sys_user_sex', 'rcpt_zc', 'rcpt_sxly', 'rcpt_ryfl', 'rcpt_sf'],
  data() {
    return {
      loading: false,
      htBgData: [], //合同基本信息
      htglHtbgZcryList: [], //合同变更组成人员表格
      htglHtbgFjList: [], //合同变更附件信息
      htbgId: null, //合同变更主键ID
      beforeData: [],
      beforeDataLoading: false,
      denyTo: null,
      dialogVisible: false,
      rowData: null,
      submitType: "1",//默认同意
      comment: null,//审批意见
      businessData: null,//业务数据
      historyList: [],//历史信息
      content_style: {
        // 解决不对齐的问题
        'width': "400px",
        // 排列第二行
        'word-break': 'break-all',
        // 'background-color': '#f3f7ff'
      },
      label_style: {
        // 解决不对齐的问题
        'width': "250px",
        // 排列第二行
        'word-break': 'break-all',
      },
      content_styles: {
        // 解决不对齐的问题
        'width': "524.5px",
        // 排列第二行
        'word-break': 'break-all',
        // 'background-color': '#f3f7ff'
      },
      label_styles: {
        // 解决不对齐的问题
        'width': "125.5px",
        // 排列第二行
        'word-break': 'break-all',
      },
    };
  },
  created() {
  },
  methods: {
    // 文件下载处理
    handleDownload(row) {
      const resource = row.fileName;
      // 默认方法
      this.$download.resource(resource);
    },
    getFileNames(row) {
      // 从路径中提取文件名
      return row.fileName.split('/').pop(); // 返回文件名部分
    },
    handleOpen(row) {
      this.rowData = row
      this.loading = true;
      this.htbgId = row.businessKey
      this.dialogVisible = true
      this.getHtBgData()
      setTimeout(() => {
        this.loading = false
      }, 1000)
    },
    //获取详情数据
    getHtBgData() {
      const htbgId = this.htbgId
      getHtbg(htbgId).then(res => {
        this.htglHtbgFjList = res.data.htglHtbgFjList
        this.htBgData = res.data
      })
      selectHtglHtbgZcryByHtbgId(htbgId).then(res => {
        this.htglHtbgZcryList = res.data.htglHtbgZcryList
      })
    },
    //获取之前的节点信息
    selectBefore(visible){
      //console.log(this.rowData.taskId, "======selectBefore")
      if (visible) {
        this.beforeDataLoading = true;
        this.denyTo = null;
        this.beforeData = [];
        selectBefore({taskId: this.rowData.taskId,
          comment: this.comment,
          businessKey: this.rowData.businessKey,
          businessType: this.rowData.businessType,
          processInstanceId: this.rowData.processInstanceId}).then(res => {
          console.table(res);
          setTimeout(() => {
            this.beforeData = res.data;
            this.beforeDataLoading = false;
          }, 100); // 模拟异步加载数据
          //this.$options = res.data
        })
      }
    },
    clickTab(tab, event) {
      if (tab.name === 'history') {
        this.getSelectHistory()
      }
    },
    //获取历史记录
    getSelectHistory() {
      selectHistory({processInstanceId: this.rowData.processInstanceId}).then(res => {
        this.historyList = res.data
      })
    },
    //提交
    onSubmit() {
      if (!this.submitType) {
        this.$message.warning("请选择提交类型")
        return
      }
      if (!this.comment) {
        this.$message.warning("请输入审批意见")
        return
      }
      if (this.submitType == 1) {
        console.log(this.rowData, '1111111111111111111111111111111')
        //审核通过
        passTask({
          taskId: this.rowData.taskId,
          comment: this.comment,
          params: {
            // day: this.businessData.qingJiaDay
          },
          businessKey: this.rowData.businessKey,
          businessType: this.rowData.businessType,
          processInstanceId: this.rowData.processInstanceId
        }).then(res => {
          this.dialogVisible = false
          this.$emit('ok')
        })
      }
      //任务驳回
      if (this.submitType == 2) {
        //审核不通过
        fallBackTaskByTaskDefinitionKey({
          comment: this.comment,
          businessKey: this.rowData.businessKey,
          businessType: this.rowData.businessType,
          processInstanceId: this.rowData.processInstanceId,
          taskId: this.rowData.taskId,
          taskDefinitionKey:this.denyTo
        }).then(res => {
          this.dialogVisible = false
          this.denyTo = null;
          this.beforeData =[];
          this.$emit('ok')
        })
      }
    },

  }
};
</script>

